import React, {Component} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native'
import Divider from "./Divider"

export default class DynamicItem extends Component {

    constructor(props){
        super(props);
        this.state = {
            title: null,
            content: null,
            imageIcon: null,
            imageContent: null,
            time: null,
            address: null,
            channelName: null
        }
    }

    render() {
        return (
            <View style={styles.outContainer}>

                <View style={styles.topContainer}>
                    <Image
                        style={styles.imageIcon}
                        source={{uri: this.state.imageIcon}}
                    />
                    <Text
                        style={styles.time}
                    >{this.state.time}</Text>
                </View>

                {this.state.imageContent ?
                    <Image
                        style={styles.imageContent}
                        source={{uri: this.state.imageContent}}
                    /> : null
                }

                {this.state.title ?
                    <Text
                        style={styles.title}
                    >
                        {this.state.title}
                    </Text> : null
                }

                <Text
                    style={styles.content}
                >
                    {this.state.content}
                </Text>

                <Text
                    style={styles.address}
                >
                    {this.state.address}
                </Text>

                <Text
                    style={styles.channelName}
                >
                    {this.state.channelName}
                </Text>

                <Divider style={styles.divide}/>

            </View>)
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            //key : value
            title: nextProps.title,
            content: nextProps.content,
            imageIcon: nextProps.imageSource,
            imageContent: nextProps.imageContent,
            time: nextProps.time,
            address: nextProps.address,
            channelName: nextProps.channelName
        });
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }
}

const styles = StyleSheet.create({
    outContainer: {
        flexDirection: 'column',
        backgroundColor: 'white'
    },
    topContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    imageIcon: {
        width: 80,
        height: 80,
        resizeMode: 'cover',
        borderRadius: 40,
        marginTop: 18,
        marginLeft: 28,
        marginBottom: 18
    },
    time: {
        fontSize: 28,
        color: '#333333',
        marginRight: 28,
    },
    imageContent: {
        height: 562
    },
    title: {
        fontSize: 32,
        marginTop: 22,
        marginLeft: 29,
        marginRight: 33,
        color: "#333333"
    },
    content: {
        fontSize: 27,
        marginTop: 20,
        marginLeft: 29,
        marginRight: 33,
        color: "#666666"
    },
    address: {
        fontSize: 26,
        marginLeft: 29,
        marginRight: 33,
        marginTop: 32,
        color: "#999999"
    },
    channelName: {
        fontSize: 26,
        marginLeft: 29,
        marginRight: 33,
        marginTop: 32,
        color: "#666666",
        marginBottom: 32
    }
})
